<!doctype html>

<html>
  	<head>
    		<meta charset=utf-8>
		<title>CSS Reference</title>
		<link rel=stylesheet type=text/css href=default.css>
	</head>
	
<body>
	
<div id="header">CSS Reference Guide</div>
	
<div id="navigation">  <ul>
    <li><a href="background.html">background</a></li>
    <li id="selected">border</li>
    <li><a href="clear.html">clear</a></li>
    <li><a href="color.html">color</a></li>
    <li><a href="display.html">display</a></li>
    <li><a href="float.html">float</a></li>
    <li><a href="font.html">font</a></li>
    <li><a href="height.html">height</a></li>
    <li><a href="letter-spacing.html">letter-spacing</a></li>
    <li><a href="line-height.html">line-height</a></li>
    <li><a href="list-style.html">list-style</a></li>
    <li><a href="margin.html">margin</a></li>
    <li><a href="overflow.html">overflow</a></li>
    <li><a href="padding.html">padding</a></li>
    <li><a href="text-align.html">text-align</a></li>
    <li><a href="text-decoration.html">text-decoration</a></li>
    <li><a href="text-indent.html">text-indent</a></li>
    <li><a href="text-transform.html">text-transform</a></li>
    <li><a href="vertical-align.html">vertical-align</a></li>
    <li><a href="width.html">width</a></li>
  </ul>

</div> <!-- for id=navigation -->

<div id="content">
	
<h1>CSS border Property</h1>
<h2>Definition and Usage</h2>
<p>The border shorthand property sets all the border properties in one declaration.</p>
<p>The properties that can be set, are (in order): border-width, border-style, and border-color.</p>
<p>It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.</p>
<table id="values">
	<tr>
		<th>Default value:</th>
		<td>medium none color</td>
	</tr>
	<tr>
		<th>Inherited:</th>
		<td>no</td>
	</tr>
	<tr>
		<th>Animatable:</th>
		<td>yes, see individual properties.</td>
	</tr>
	<tr>
		<th>Version:</th>
		<td>CSS1</td>
	</tr>
	<tr>
		<th>JavaScript Syntax:</th>
		<td>object.style.border="3px solid blue"</td>
	</tr>
</table>

<h3>CSS Syntax</h3>
<div id="syntax">
border: border-width border-style border-color|initial|inherit border-radius box-shadow border-image;

</div>

<h3>Property Values</h3>
<table id="properties">
	<tr>
		<th>Value</th>
		<th>Description</th>
        <th>CSS Version</th>
	</tr>
	<tr>
		<td>border-width	</td>
		<td>Specifies the width of the border. Default value is "medium"</td>
        <td>1</td>
	
	</tr>
	<tr>
		<td>border-style</td>
		<td>Specifies the style of the border. Default value is "none"</td>
		<td>1</td>
	</tr>
	<tr>
		<td>border-color</td>
		<td>Specifies the color of the border. Default value is the color of the element</td>
        <td>1</td>
	</tr>
	<tr>
		<td>initial</td>
		<td>Sets this property to its default value.</td>
        <td>1</td>
	</tr>
	<tr>
		<td>inherit</td>
		<td>Inherits this property from its parent element.</td>
        <td>1</td>
	</tr>
    <tr>
    	<td>border-radius</td>
        <td>Used to create rounded courners.</td>
        <td>3</td>
    </tr>
    <tr>
    	<td>box-shadow</td>
        <td>Add a drop shadow.</td>
        <td>3</td>
    </tr>
    <tr>
    	<td>border-image</td>
        <td>Use an image to create a border.</td>
        <td>3</td>
    </tr>
</table>

<h3>Code</h3>
<div id="code">
<pre>
<code>        
div#border-example
{
    width:150px;
    height:150px;
	margin:10px;
}
div#border-example.border-example1 {
    border: dashed red;
	float:left;
	clear:left
}
div#border-example.border-example2 {
	border: 5px dotted green;
	float: left;
	border-radius: 37px;
}
div#border-example.border-example3 {
    border: double blue;
	box-shadow: 5px 5px 5px #888888;
	float:left;
	clear:right
}
div#border-example.border-example4 {
	border: 5px groove #7400F8;
	float: left;
	clear: left
}
div#border-example.border-example5 {
	border: 5px ridge #FF7200;
	box-shadow: 8px 5px 8px #888888;
	float: left;
	border-radius: 195px;
}
div#border-example.border-example6 {
	border: 5px double blue;
	float: left;
	border-radius: 31px;
	clear: right
}

</code></pre>
</div>
<h3>Example</h3>
<div id="example">
<div id="border-example-enclosure">
<div class="border-example"  id="border-example1"></div>
<div class="border-example"  id="border-example2"></div>
<div class="border-example"  id="border-example3"></div>	
<div class="border-example"  id="border-example4"></div>
<div class="border-example"  id="border-example5"></div>
<div class="border-example"  id="border-example6"></div>
</div>
</div>
	
</div>
	
<div id="footer">&copy; HTML Class of 2015</div>
  
</body>	

</html>